<template>
    <div class="boxContentCss">
            <EdCreateCard :title="isUpdate ? '编辑物业信息' : '添加物业项目'">
                <template #back>
                    <div class="createBack" @click="$utilsSet.goBack($router)" >
                        <svg-icon icon-class="back" /> 返回
                    </div>
                </template>
                    <el-form  :model="form" :rules="rules" ref="ruleForm"  label-width="110px">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item  label="所属公司" prop="orgName" :rules="$validate.validates({required:true,msg:'请输入所属公司'})">
                                    <el-input class="flex-input" disabled v-model="form.orgName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item   label="项目名称" prop="villageName" :rules="$validate.validates({required:true,msg:'请输入项目名称'})">
                                    <el-input  v-model="form.villageName" maxlength="50"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item class="remark"  label="所属社区" prop="districtList" :rules="$validate.validates({required:true,msg:'所属社区不能为空',trigger:['blur','change']})" >
                                    <CommityPicker ref="CommityPicker" placeholder="请选择所属社区" @emit-cascader-value="emitCascaderValue" style="width:100%"></CommityPicker>
                                </el-form-item> 
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item   label="项目地址" prop="address">
                                    <el-input style="width: 100%" v-model="form.address" placeholder="请输入"  maxlength="50">
                                            <i  slot="suffix" @click="showMap" class="el-icon-location-information fontSize16"></i>
                                    </el-input>
                                </el-form-item> 
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item   label="联系人" prop="contact">
                                    <el-input class="flex-input"  v-model="form.contact" maxlength="50"></el-input>
                                </el-form-item>
                            </el-col>  
                            <el-col :span="6">
                                <el-form-item  label="联系电话" prop="phone" >
                                    <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item class="remark"  label="服务中心电话" prop="serviceCenterPhone" >
                                    <el-input class="flex-input"  v-model="form.serviceCenterPhone" placeholder="请输入手机号或者座机号，座机号用-连接"></el-input>
                                </el-form-item> 
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item class="remark"  label="备注" prop="remark" >
                                    <el-input class="flex-input"  v-model="form.remark" maxlength="100"></el-input>
                                </el-form-item> 
                            </el-col>
                        </el-row>                     
                    </el-form>    
                <div class="projectButton">
                    <el-button  class="ed-button ed_black-bottom" @click="submit()" >确&nbsp;&nbsp;定</el-button>
                    <el-button @click="$utilsSet.goBack($router),dialogVisible = false" icon-class="back" class="ed-button ed_white_bottom">取&nbsp;&nbsp;消</el-button>
                </div>
            </EdCreateCard>
            <ed-map ref="edMap" @setAddress="setAddress" :edMapObj="edMapObj"></ed-map>
    </div>
</template>

<script>
    import CommityPicker from "./components/CommityPicker.vue"
    import EdMap from "../../../components/EdMap.vue";
    import {getDetailById, editproject,addproject} from "./api.js";
    import EdSelect from 'src/components/EdSelect.vue'
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import WisdomUploadSingle from "src/components/WisdomUploadSingle.vue";
    import { defineComponent } from 'vue'
    export default defineComponent({
        name: "projectCreate",
        components: {EdMap,EdCreateCard, WisdomUploadSingle,EdSelect,CommityPicker},
        data(){
            const validateTel = (rule,value,callback)=>{
                if(value){
                    if ( /^1[3|4|5|7|8][0-9]\d{8}$/.test(value)) {
                        callback();
                    } else {
                        callback(new Error( "请输入正确的11位的手机号"))
                    }
                } else {
                    callback()
                }
            }
            // 服务中心电话既可以输入手机号也可以输入座机号，，座机号要开头可以是027，又可以是0755
            const validatePhone = (rule,value,callback) => {
                if(value){
                    if (/^1/.test(value)) {
                        if ( /^1[3|4|5|7|8][0-9]\d{8}$/.test(value)) {
                            callback();
                        } else {
                            callback(new Error( "请输入正确的11位的手机号"))
                        }
                    } else if (/^0/.test(value)) {
                        if (/^0\d{2,4}-\d{6,9}$/.test(value)) {
                            callback();
                        } else {
                            callback(new Error("请用0xxx-xxxxxxx格式"))
                        }
                    } else {
                        callback(new Error("请输入11位手机号或0xxx-xxxxxxx格式座机号"))
                    }
                } else {
                    callback(new Error("服务电话不能为空"));
                }
            }
            return{
                rules:{
                    serviceCenterPhone: [
                        { validator: validatePhone, trigger: 'blur',required: true},
                    ],
                    phone:[
                        { validator: validateTel,trigger: 'blur' },
                    ]
                },
                form:{
                    orgName:this.$store.getters.orgName,
                    contact: "",
                    phone: "",
                    orgId:this.$store.getters.vid,
                    remark: "",
                    villageName: "",
                    lngLat:'',
                    address:'',
                    communityName:'',
                    serviceCenterPhone:'',
                    districtList: []
                },
                selectParams:{
                    placeholder:"请选择所属公司",
                    options: [],
                    props: {label:"label", value:"value"}
                },
                edMapObj:{},
                isUpdate:false,
            }
        },
        activated(){
            this.$refs.ruleForm.resetFields()
            // 判断一下是否是根据id传过来的参数，如果是就是点击编辑按钮，展示这个页面，如果不是根据id传过来的就是添加物业项目这个页面，2个按钮共用一个页面
            if(this.$route.query.id){
                this.isUpdate=true;
                this.getDetailById()

            }else{
                this.isUpdate = false
            }
        },
        deactivated() {
           this.form = {
                orgName:this.$store.getters.orgName,
                contact: "",
                phone: "",
                orgId:this.$store.getters.vid,
                remark: "",
                villageName: "",
                lngLat:'',
                address:'',
                communityName:'',
                serviceCenterPhone:'',
                districtList: []
            } 
            this.$refs.CommityPicker.reset()
        },
        methods:{
            getDetailById(){
                getDetailById(this.$route.query.id).then(res => {
                    if(res.success) {
                        this.form = {...res.data}
                        this.form.orgName = this.$store.getters.orgName
                        this.form.orgId = this.$store.getters.vid
                        this.form.address = res.data.address?res.data.address:''

                        // 回显所属社区的值，新增的时候传给后端的id是数字，回显的id是字符串，所以要number一下
                        let ids = res.data.districtList && res.data.districtList.map(v=>{
                            return Number(v.id)
                        })
                        if(ids.length>0) this.$refs.CommityPicker.setVal(ids)
                    }
                })
            },
            submit(){
                this.$refs['ruleForm'].validate((valid)=>{
                    if(!valid){
                        return
                    }
                    // 先判断是不是编辑按钮，如果是就调下面编辑的api
                    if(this.isUpdate){
                        // if(this.entranceManufacturer == this.form.entranceManufacturer){
                            editproject(this.form).then(response => {
                                if(response.success) {
                                    this.$message.success({
                                        message: '更新物业项目成功！',
                                        duration: 2000,
                                        center:true
                                    });
                                    this.$router.back()
                                }
                            })
                        // }
                        // else {
                        //     this.$refs.confirmDeleteRef.open("操作确认","门禁厂家信息已修改，是否执行此操作？","warning")
                        // }
                    }else{
                        // 这个是添加物业项目时调的api
                        addproject(this.form).then(response => {
                                if(response.success) {
                                    this.$message.success({
                                        message: '添加项目成功！',
                                        duration: 2000,
                                        center:true
                                    });
                                    this.$router.back()
                                    
                                }
                            })
                        }
                    })
            },
            showMap(){
                this.$refs.edMap.showMap() 
            },
            setAddress(data){
                this.edMapObj = data
                this.$set(this.form, 'address',data.address )
                // this.form.address = data.address;
                this.form.lngLat = data.lnglat.lng + ',' +data.lnglat.lat;
                this.$refs.ruleForm.validateField("address")
                console.log('form---->', this.form)
            },
            emitCascaderValue(data){
                this.form.districtList = data
            },
            // confirmDeleteTrue(){
            //     // 这个是添加物业项目时调的api
            //     editproject(this.form).then(response => {
            //         if(response.success) {
            //             this.$message.success({
            //                 message: '更新物业项目成功！',
            //                 duration: 2000,
            //                 center:true
            //             });
            //             this.$router.back()
            //         }
            //     })
            // },
        }
    })
</script>
<style lang="scss" scoped>
.boxContentCss{
    position: relative;
    padding-bottom: 150px;
    .el-form{
        padding: 45px 45px 15px 15px;
    }
}
.projectButton{
    flex: 1;
    display: flex;
    justify-content: flex-start;
    margin-left:135px;
}
.createBack{
    margin-right: 50px;
}

</style>